<template>
  <div class="home">
    <!-- 首页轮播 -->
    <home-swipe :list="carouselList"></home-swipe>

    <!-- 首页功能快捷入口 Grid宫格-->
    <home-enter></home-enter>

    <!-- 商品推荐 -->
    <home-goods :list="recommendGoodsList" title="推荐商品"></home-goods>

    <!-- 新品上架 -->
    <home-goods :list="newGoodsList" title="新品上架"></home-goods>

    <!-- 销售排行 -->
    <home-goods :list="hotGoodsList" title="热销商品"></home-goods>

  </div>
</template>

<script>
//导入封装后的首页接口
import * as HomeAPI from "@/api/home.js"

import HomeSwipe from "./components/HomeSwipe.vue"
import HomeEnter from "./components/HomeEnter.vue"
import HomeGoods from "./components/HomeGoods.vue"

export default {
  name: 'home',
  components: {
    HomeSwipe, HomeEnter, HomeGoods
  },

  data() {
    return {
      carouselList: [], //轮播图
      recommendGoodsList: [], //商品推荐
      newGoodsList: [], //新品上架
      hotGoodsList: [], //销售排行
    }
  },

  // 生命周期钩子-实例创建后,可以用this.*
  created() {
    //2.使用封装后的接口
    HomeAPI.getHomeData().then(result => {
      // console.log(result); //控制台调式输出
      this.carouselList = result.data.carouselList; //保存API调用的返回的轮播数据
      this.recommendGoodsList = result.data.recommendGoodsList; //保存首页商品推荐数据
      this.newGoodsList = result.data.newGoodsList; //保存首页新品上架	数据
      this.hotGoodsList = result.data.hotGoodsList; //保存首页热销商品数据
    });
  },
}
</script>
<style scoped>
</style>
